import { Progress } from 'antd'
import React, { useEffect, useState } from 'react'

export default function ProgressPlus(props) {
    const { percent, color } = props;
    const [currentPercent, setCurrentPercent] = useState(0);
    useEffect(() => {
        const timer = setInterval(() => {
            setCurrentPercent(c => {
                if (c >= percent) {
                    return percent;
                }
                return c + percent / 10;
            });
        }, 200)
        return () => {
            clearInterval(timer);
        }
    }, [percent])
    return (
        <Progress strokeWidth={10} strokeColor={color} type="circle" size={44} percent={currentPercent} format={e => {
            return props.children
        }}></Progress>
    )
}